<template>
	<view class="">
		<view class="data-panel">
			<view class="flex justify-between align-center">
				<view class="flex justify-between align-center">
					<view class="flex">
						<view 
							class="tabs-item" 
							:class="dateIndex===ix?'bg-red':''"
							v-for="(im, ix) in dateTabs" 
							:key="im.value"
							@click="onDate(im,ix)"
						>
						<text>{{im.name}}</text>
						</view>
					</view>
				</view>
				<uni-icons
					custom-prefix="iconfont" 
					type="icon-excel" 
					size="32" 
					@click="onExcel('ReportsGoodsAnalyse', {date: searchData.date})" 
					color="#13227a">
				</uni-icons>
			</view>
		</view>
		<view class="pl-20 pr-20 bg-white mb-20">
			<u-tabs
				:list="subsectionList" 
				:current="curNow" 
				keyName="label"
				lineWidth="40"
				lineColor="#e54d42"
				:activeStyle="{color: '#e54d42'}"
				@click="sectionChange" 
			/>
		</view>
		<view class="my-list pl-0 pr-0" :style="{height:swiperHeight+'px'}">
			<zb-table
				:columns="tableColumn"
				:data="tableData"
				:border="false"
				@sort-change="onSort"
			/>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
	</view>
</template>

<script>
	import myCellGroup from '@/components/my-cell-group/index.vue'
	import setDate from '@/common/date.js';
	import listHeightMixin from '@/common/computedAltitude.js'
	import dwFile from '@/common/mixins/downloadFile.js'
	export default {
		mixins:[listHeightMixin, dwFile],
		components:{ myCellGroup },
		data(){
			return {
				curNow: 0,
				dateIndex: 0,
				showCalendar: false,
				sdate: '',
				subsectionList: [
					{ label: '项目', value: 11 },
					{ label: '卡项', value: 12 },
					{ label: '产品', value: 1 },
				],
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				dateTabs:[
					{name:'今天',value: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`},
					{name:'昨日',value: `${setDate.getDate(-1)} 到 ${setDate.getDate(0)}`},
					{name:'近七日',value:`${setDate.getDate(-7)} 到 ${setDate.getDate(0)}`},
					{name:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{name:'自定义',value:999}
				],
				tableColumn:[
					{ name: 'ranking', label: '排名', align:"center", width:60},
					{ name: 'name', label: '项目名称', align:"center", width:100},
					{ name: 'nums', label: '销量', align:"center", sorter: 'custom', width:65},
					{ name: 'amount', label: '现金收入', align:"center", sorter: 'custom', width:75},
					{ name: 'consume', label: '耗卡收入', align:"center", sorter: 'custom', width:75},
				],
				tableData:[],
				searchData:{
					page: 1,
					limit: 40,
					type: 11,
					date: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`
				}
			}
		},
		onLoad() {
			this.getPageList()
		},
		methods: {
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index
				this.searchData.type = e.value
				if(e.index === 0){
					this.tableColumn = [
						{ name: 'ranking', label: '排名', align:"center", width:60},
						{ name: 'name', label: '项目名称', align:"center", width:100},
						{ name: 'nums', label: '销量', align:"center", sorter: 'custom', width:65},
						{ name: 'amount', label: '现金收入', align:"center", sorter: 'custom', width:75},
						{ name: 'consume', label: '耗卡收入', align:"center", sorter: 'custom', width:75},
					]
				}else {
					this.tableColumn = [
						{ name: 'ranking', label: '排名', align:"center", width:60},
						{ name: 'name', label: '项目名称', align:"center", width:165},
						{ name: 'nums', label: '销量', align:"center", sorter: 'custom', width:65},
						{ name: 'amount', label: '现金收入', align:"center", sorter: 'custom', width:85},
					]
				}
				this.onSearch()
			},
			onSort(column,model,index){
				this.tableData = []
				this.searchData.page = 1
				this.searchData.orderField = column.name
				this.searchData.orderDirection = model
				this.getPageList()
			},
			onSearch(){
				this.searchData.page = 1
				this.tableData = []
				this.getPageList()
			},
			confirmDate(dates){
				this.sdate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.dateTabs[4].name = this.sdate
				this.searchData.date = `${dates[0]} 到 ${dates[dates.length-1]}`
				this.onSearch()
				this.showCalendar = false
			},
			onDate(row,index){
				if(this.dateIndex === index && this.dateIndex!==4) return
				this.dateIndex = index
				if(index === 4){
					this.showCalendar = true
				}else {
					this.dateTabs[4].name = '自定义'
					this.searchData.date = row.value
					this.onSearch()
				}
			},
			getPageList(){
				this.$reqPost('ReportsGoodsAnalyse',this.searchData).then(res=>{
					this.tableData = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.data-panel{
		padding:10px;
		font-size: 14px;
		background-color: #fff;
		.tabs-item{
			padding:4px 6px;
			border-radius:2px;
		}
	}
</style>